<template>
	<div class="box">
		<div class="hander d-flex">
			<div class="d-flex">
				<div class="icon"></div>
				<div class="name">“数智社事”内部管理系统 <span>v1.0.0</span></div>
			</div>
		</div>
		<div class="content">
			<div class="title">
				{{ state.name }} <span>|</span> {{ state.section }}
			</div>
			<div class="itemBox d-flex">
				<div
					class="item"
					v-for="(v, i) in state.data"
					:key="v.bgImg"
					:style="{ 'background-image': 'url(' + v.bgImg + ')' }"
					@click="toPath(v.path)"
				>
					<div class="num" v-if="v.num">
						{{ v.num }}
					</div>
					<div
						class="name"
						:style="{ 'background-image': 'url(' + v.titleImg + ')' }"
					></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { ElRow, ElCol } from "element-plus";
import { processApi } from "@/api/biddingProject.js";
const route = useRoute();
const router = useRouter();
const store = useStore();
const state = reactive({
	name: store.state.user.username,
	section: store.state.user.departmentName,

	data: [
		{
			bgImg: require("@/assets/tender/tender15.png"),
			titleImg: require("@/assets/tender/tender1.png"),
			path: "/tender/projectManage/infoManagePage",
		},
		{
			bgImg: require("@/assets/tender/tender14.png"),
			titleImg: require("@/assets/tender/tender3.png"),
			path: "/tender/tenderTaskManage",
		},
		{
			bgImg: require("@/assets/tender/tender11.png"),
			titleImg: require("@/assets/tender/tender6.png"),
			path: "/tender/taskExecution",
		},
		{
			bgImg: require("@/assets/tender/tender16.png"),
			titleImg: require("@/assets/tender/tender7.png"),
			path: "/tender/collaborativeApprovalManagement/index/:id",
		},
		{
			bgImg: require("@/assets/tender/tender8.png"),
			titleImg: require("@/assets/tender/tender17.png"),
			path: "/tenderProjectManage/contractPage",
		},
		{
			bgImg: require("@/assets/tender/tender12.png"),
			titleImg: require("@/assets/tender/tender5.png"),
			path: "/tender/ledgerPage",
			num: "",
		},
		// {
		// 	bgImg: require("@/assets/tender/tender13.png"),
		// 	titleImg: require("@/assets/tender/tender4.png"),
		// },
	],
});

const toPath = (path) => {
	router.push({
		path: path,
	});
};

const getHomeBoard = () => {
	processApi.getHomeBoard().then((res) => {
		/*
    distributedNum	integer($int64)
      待分配任务数

      contractNum	integer($int64)
      待支付账单逾期合同

      incompleteNum	integer($int64)
      未完成任务数

      processAuditNum	integer($int64)
      审核中或驳回的审批单数

    */
		if (res.code == 200) {
			state.data[1].num = res.data.distributedNum;
			state.data[4].num = res.data.contractNum;
			state.data[2].num = res.data.incompleteNum;
			state.data[3].num = res.data.processAuditNum;
		}
	});
};

onMounted(() => {
	getHomeBoard();
});
</script>
<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100%;
	background: url(@/assets/tender/tender2.png);
	background-size: cover;
	.hander {
		height: 70px;
		width: 100%;
		border-bottom: 1px solid #e3e7f1;
		align-items: center;
		justify-content: space-around;
		.d-flex {
			align-items: center;
		}
		.icon {
			width: 29px;
			height: 29px;
			background: url(@/assets/tender/logo.png);
			background-size: cover;
		}

		.name {
			font-size: 18px;
			font-weight: 400;
			color: #1a1a1a;
			letter-spacing: 1px;
			line-height: 70px;
			span {
				font-size: 12px;
			}
		}
	}

	.title {
		width: 260px;
		height: 64px;
		background: url(@/assets/tender/tender9.png);
		background-size: contain;
		line-height: 54px;
		font-size: 14px;
		font-weight: 700;
		color: #1a1a1a;
		padding-left: 20px;
		margin-left: 20px;
	}

	.content {
		width: 100%;
		padding: 18px 147px 0px;
	}
}

.itemBox {
	width: 100%;
	flex-wrap: wrap;
	.item {
		cursor: pointer;
		width: 274px;
		height: 338px;
		background: url(@/assets/tender/tender15.png) no-repeat;
		background-size: cover;
		position: relative;
		margin: 5px calc((100% - 274px * 5) / 2 / 5);
		transition: all 0.5s;
		position: relative;
		.name {
			width: 216px;
			height: 55px;
			background-size: cover;
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
		}
		.num {
			position: absolute;
			padding: 0 5px;
			min-width: 20px;
			height: 20px;
			border-radius: 10px;
			background-color: #f93335;
			font-size: 18px;
			font-weight: 700;
			color: #ffffff;
			top: 20px;
			right: 20px;
			text-align: center;
		}
	}
	.item:hover {
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
	}
	.item:nth-child(3) {
		.name {
			height: 73px;
		}
	}
}
</style>
